<!DOCTYPE html>
<html lang="en-US">
<head>
<title>文本编辑器</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="author" content="godo">
<meta name="description" content="文本编辑器">

<meta id="theme_color" name="theme-color" content="#1e1e1e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Text Editor">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<base href="." target="_blank">
<link rel="manifest">
<link rel="icon" type="image/svg+xml" href="resources/icon.svg">
<link rel="alternate icon" type="image/png" sizes="16x16" href="resources/icon-16.png">
<link rel="alternate icon" type="image/png" sizes="32x32" href="resources/icon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="resources/app-apple-touch-180.png">
<link rel="apple-touch-icon" sizes="1024x1024" href="resources/app-apple-touch-1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="resources/startup-iphone5-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="resources/startup-iphone5-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="resources/startup-iphone6-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="resources/startup-iphone6-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="resources/startup-iphoneplus-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="resources/startup-iphoneplus-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="resources/startup-iphonex-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="resources/startup-iphonex-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="resources/startup-iphonexr-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="resources/startup-iphonexr-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="resources/startup-iphonexsmax-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="resources/startup-iphonexsmax-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="resources/startup-ipad-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="resources/startup-ipad-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="resources/startup-ipadpro1-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="resources/startup-ipadpro1-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="resources/startup-ipadpro3-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="resources/startup-ipadpro3-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="resources/startup-ipadpro2-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="resources/startup-ipadpro2-portrait.png">
<link rel="stylesheet" href="css/css2.css?family=Cousine&family=Rubik&display=swap">
<link rel="stylesheet" href="css/vanilla-layout.css">
<link rel="stylesheet" href="css/vanilla-appearance.css">
<link rel="stylesheet" href="css/vanilla-highlighting.css">
<script src="/admin/config/config.js"></script>
<script src="js/script.js"></script>
<script src="js/script2.js"></script>
<script src="js/prism.min.js" data-manual></script>
<script src="js/prism-json.min.js"></script>
<script src="js/init.js"></script>
<link rel="stylesheet" href="css/index.css">
<style id="scrollbar_styles">
  ::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-height);
  }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
    background: none;
  }
  ::-webkit-scrollbar-thumb {
    width: 36px;
    height: 36px;
    background: #808080;
    background-clip: content-box;
    border: var(--scrollbar-border-width) solid transparent;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a0;
  }
</style>

<link rel="stylesheet" href="css/tab.css">
<style id="theme_styles"></style>

</head>

<body class="code horizontal" data-view="code" data-orientation="horizontal" ontouchstart>

<svg id="symbol_definitions">
  <symbol id="arrow_icon" viewBox="0 0 512 512">
    <path d="m112.66 0 286.68 256-286.68 256z"/>
  </symbol>
  <symbol id="check_icon" viewBox="0 0 512 512">
    <path d="m63.346 191.15 192.72 192.72-63.402 63.402-192.72-192.72z"/>
    <path d="m129.5 383.87 319.15-319.15 63.402 63.402-319.15 319.15z"/>
  </symbol>
  <symbol id="back_icon" viewBox="0 0 512 512">
    <path d="m160.8 191.81 254.36 254.36-64 64-254.36-254.36z"/>
    <path d="m96.833 255.86 254.36-254.36 64 64-254.36 254.36z"/>
  </symbol>
  <symbol id="minimize_icon" viewBox="0 0 512 512">
    <path d="m30.33 211.17h451.34v89.669h-451.34z"/>
  </symbol>
  <symbol id="close_icon" viewBox="0 0 512 512">
    <path d="m1.5795 65.78 64.201-64.201 190.22 190.22 190.22-190.22 64.201 64.201-190.22 190.22 190.22 190.22-64.201 64.201-190.22-190.22-190.22 190.22-64.201-64.201 190.22-190.22z"/>
  </symbol>
  <symbol id="rename_icon" viewBox="0 0 512 512">
    <path d="m-0.0618 512.07v-128.63l128.63 128.63z"/>
    <path d="m383.21 0.052969 128.72 128.72-88.63 88.63-128.72-128.72z"/>
    <path d="m252.59 130.63 128.72 128.72-210.68 210.68-128.72-128.72z"/>
  </symbol>
  <symbol id="undo_icon" viewBox="0 0 512 512">
    <path d="m133.64 437.65-133.64-133.64h267.28z"/>
    <path d="m512 249c-0.72363-111.33-91.271-201.16-202.61-200.98-111.33 0.17137-201.61 90.272-201.99 201.61l52.695 0.18028c0.28168-82.334 67.039-148.97 149.37-149.09 82.334-0.12673 149.3 66.299 149.83 148.63z"/>
    <path d="m107.4 246.77h52.472v57.48h-52.472z"/>
    <path d="m459.53 246.77h52.472v190.87h-52.472z"/>
  </symbol>
  <symbol id="redo_icon" viewBox="0 0 512 512">
    <path d="m378.36 437.65 133.64-133.64h-267.28z"/>
    <path d="m0.0044544 249c0.72363-111.33 91.271-201.16 202.61-200.98 111.33 0.17137 201.61 90.272 201.99 201.61l-52.695 0.18028c-0.28168-82.334-67.039-148.97-149.37-149.09-82.334-0.12673-149.3 66.299-149.83 148.63z"/>
    <path d="m404.6 246.77h-52.472v57.48h52.472z"/>
    <path d="m52.473 246.77h-52.472v190.87h52.472z"/>
  </symbol>
  <symbol id="install_icon" viewBox="0 0 512 512">
    <path d="m198.36 18v43.917h-154.81v308.88h424.9v-75.391h43.551v66.242c-0.029 13.167-4.952 25.852-13.813 35.592-8.86 9.739-21.025 15.837-34.13 17.108l-5.123 0.366h-65.876l23.788 26.351v52.7h-321.69v-52.7l23.788-26.351h-66.241c-13.19 0.054-25.922-4.84-35.679-13.717-9.7572-8.876-15.831-21.089-17.022-34.225v-296.07c-0.053852-13.19 4.8408-25.922 13.717-35.679 8.8764-9.7572 21.089-15.831 34.226-17.022h150.42zm174.94 0v186.65l64.046-66.241 38.427 39.525-128.09 132.85-128.09-132.85 38.427-39.891 64.046 66.607v-186.65h51.236z"/>
  </symbol>
  <symbol id="refresh_icon" viewBox="0 0 512 512">
    <path d="m510.27 285.75c-13.893 118.73-108.1 212.04-226.96 224.79-118.86 12.751-230.71-58.451-269.47-171.53-38.761-113.08 5.8941-237.93 107.58-300.78 101.68-62.846 233.32-46.955 317.13 38.282l-37.067 36.446c-66.79-67.929-171.7-80.593-252.74-30.508-81.036 50.084-116.62 149.58-85.733 239.7 30.89 90.117 120.03 146.86 214.75 136.7 94.721-10.161 169.8-84.522 180.87-179.14z"/>
    <path d="m512 189.01v-189.01l-188.98 189.01z"/>
  </symbol>
  <symbol id="github_icon" viewBox="0 0 512 512">
    <path d="m255.95 6c-141.33 0-255.95 114.62-255.95 256.05 0 113.04 73.338 209.01 175.07 242.85 12.782 2.357 17.496-5.553 17.496-12.31 0-6.077-0.262-22.211-0.367-43.531-47.459 10.319-76.218-1.153-86.223-34.312-7.7532-19.748-17.235-32.216-28.445-37.454-15.506-10.582-14.877-15.768 1.7811-15.558 17.13 1.205 30.173 10.005 39.183 26.349 22.84 39.131 59.927 27.816 74.543 21.268 2.304-16.501 8.905-27.816 16.239-34.207-56.837-6.443-116.61-28.444-116.61-126.51 0-27.973 9.9529-50.812 26.349-68.727-2.619-6.444-11.419-32.478 2.515-67.733 14.3-4.557 37.768 4.191 70.404 26.245 20.377-5.658 42.326-8.487 64.065-8.591 21.739 0.104 43.636 2.933 64.118 8.591 32.583-22.054 55.998-30.802 70.299-26.245 13.986 35.255 5.186 61.289 2.567 67.733 16.396 17.915 26.297 40.754 26.297 68.727 0 98.325-59.875 119.96-116.87 126.3 9.167 7.91 17.392 23.52 17.392 47.407 0 34.259-0.315 61.865-0.315 70.247 0 6.81 4.61 14.824 17.601 12.31 101.62-33.945 174.91-129.81 174.91-242.85 0-141.44-114.67-256.05-256.05-256.05z"/>
  </symbol>
</svg>

<header id="header">
  <div class="app-region"></div>
  <div class="app-icon">
    <img src="resources/icon.svg" alt="">
  </div>
  <div class="app-menubar">
    <menu-drop id="file_menu">
      <button>文件</button>
      <ul>
        <li onclick="createEditor({ auto_replace: false });" data-shortcuts='{ "default": "Ctrl+Shift+X", "macOS": "Shift+Cmd+X" }'>新建文件</li>
        <li part="create-window-option" onclick="createWindow();" data-shortcuts='{ "default": "Ctrl+Shift+C", "macOS": "Shift+Cmd+C" }'>打开新窗口</li>
        <li onclick="openFiles();" data-shortcuts='{ "default": "Ctrl+O", "macOS": "Cmd+O" }'>打开文件</li>
        <li onclick="window.setTimeout(renameEditor,10);" data-shortcuts='{ "default": "Ctrl+Shift+R", "macOS": "Shift+Cmd+R" }'>重命名</li>
        <li onclick="saveFile();" data-shortcuts='{ "default": "Ctrl+S", "macOS": "Cmd+S" }'>保存文件</li>
        <li>另存为...
          <ul>
            <li onclick="saveFile('txt');" data-shortcuts='{ "default": ".txt" }'>Text</li>
            <li onclick="saveFile('html');" data-shortcuts='{ "default": ".html" }'>HTML</li>
            <li onclick="saveFile('css');" data-shortcuts='{ "default": ".css" }'>CSS</li>
            <li onclick="saveFile('js');" data-shortcuts='{ "default": ".js" }'>JavaScript</li>
            <li onclick="saveFile('json');" data-shortcuts='{ "default": ".json" }'>JSON</li>
            <li onclick="saveFile('svg');" data-shortcuts='{ "default": ".svg" }'>SVG</li>
            <li>更多...
              <ul>
                <li onclick="saveFile('webmanifest');" data-shortcuts='{ "default": ".webmanifest" }'>Web Manifest</li>
                <li onclick="saveFile('md');" data-shortcuts='{ "default": ".md" }'>Markdown</li>
                <li onclick="saveFile('mcmeta');" data-shortcuts='{ "default": ".mcmeta" }'>MCMETA</li>
                <li onclick="saveFile('xml');" data-shortcuts='{ "default": ".xml" }'>XML</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </menu-drop>
    <menu-drop id="view_menu" data-select="no-appearance">
      <button>查看</button>
      <ul>
        <li data-selected onclick="setView({ type: 'code' });" data-shortcuts='{ "default": "Ctrl+Shift+1", "macOS": "Ctrl+Cmd+1" }' data-value="code">代码</li>
        <li onclick="setView({ type: 'split' });" data-shortcuts='{ "default": "Ctrl+Shift+2", "macOS": "Ctrl+Cmd+2" }' data-value="split">左右分屏</li>
        <li onclick="setView({ type: 'preview' });" data-shortcuts='{ "default": "Ctrl+Shift+3", "macOS": "Ctrl+Cmd+3" }' data-value="preview">全屏</li>
        <li><hr></li>
        <li onclick="setOrientation();" data-shortcuts='{ "default": "Ctrl+Shift+4", "macOS": "Ctrl+Cmd+4" }' data-no-select>上下分屏</li>
        <li onclick="createDisplay();" data-shortcuts='{ "default": "Ctrl+Shift+5", "macOS": "Ctrl+Cmd+5" }' data-no-select>弹窗</li>
      </ul>
    </menu-drop>
    <menu-drop id="preview_menu" data-select="no-appearance">
      <button>预览</button>
      <ul>
        <li onclick="refreshPreview({ force: true });" data-shortcuts='{ "default": "Ctrl+Shift+Enter", "macOS": "Ctrl+Cmd+Return" }' data-no-select>刷新</li>
        <li onclick="preview_base_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+B", "macOS": "Ctrl+Cmd+B" }' data-no-select>基础地址</li>
        <li><hr></li>
        <li data-value="active-editor" data-selected onclick="setPreviewSource({ active_editor: true });">当前编辑页</li>
      </ul>
    </menu-drop>
    <menu-drop id="tools_menu">
      <button>工具</button>
      <ul>
        <li onclick="replace_text_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+F", "macOS": "Shift+Cmd+F" }'>查找替换</li>
        <!--li onclick="color_picker_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+K", "macOS": "Shift+Cmd+K" }'>Color Picker</li-->
        <li onclick="json_formatter_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+G", "macOS": "Shift+Cmd+G" }'>JSON格式化</li>
        <li onclick="uri_encoder_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+Y", "macOS": "Shift+Cmd+Y" }'>URI加密</li>
        <li onclick="uuid_generator_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+O", "macOS": "Shift+Cmd+O" }'>UUID生成</li>
        <li>插入代码块...
          <ul>
            <li onclick="Tools.insertTemplate({ type: 'html' });" data-shortcuts='{ "default": "Ctrl+Shift+H", "macOS": "Shift+Cmd+H" }'>HTML</li>
            <li onclick="Tools.insertTemplate({ type: 'pack-manifest-bedrock' });">打包基座</li>
          </ul>
        </li>
      </ul>
    </menu-drop>
    <menu-drop id="settings_menu" data-alternate>
      <button onclick="settings_card.open();">设置</button>
      <ul data-show-icons>
        <li part="install-option" onclick="showInstallPrompt();"><img src="resources/install.svg" alt="">安装</li>
        <li onclick="theme_card.open();"><img src="resources/template.svg" alt="">模版设置</li>
        <li part="clear-site-caches-option" onclick="clearSiteCaches();"><img src="resources/settings.svg" alt="">清除缓冲</li>
        <li onclick="Editor.settings.reset({ confirm: true });"><img src="resources/settings.svg" alt="">重置设置</li>
      </ul>
    </menu-drop>
  </div>
  <div class="app-omnibox">
    <button id="install_option" class="option" title="安装" onclick="showInstallPrompt();"><svg><use href="#install_icon"/></svg></button>
    <button class="option" title="刷新" onclick="refreshPreview({ force: true });"><svg><use href="#refresh_icon"/></svg></button>
    <button class="option" title="保存到服务器" id="saveData"><svg><use href="#check_icon"/></svg></button>
  </div>
</header>

<main id="main">
  <div id="workspace" class="workspace">
    <div id="workspace_tabs" class="workspace-tabs">
      <button id="create_editor_button" class="create-editor-button" title="New Editor"><svg><use href="#close_icon"/></svg></button>
    </div>
    <div id="workspace_editors" class="workspace-editors"></div>
  </div>
  <div id="scaler" class="scaler"></div>
  <iframe id="preview" class="preview" src="about:blank"></iframe>
  <div id="card_backdrop" class="card-backdrop"></div>
  <ste-card id="settings_card" class="card dialog" data-type="dialog">
    <div class="header">
      <span class="heading">设置</span>
    </div>
    <div class="main">
      <div class="content">
        <div class="item list start">
          <div class="select">
            <label>默认方向:</label>
            <menu-drop id="default_orientation_setting" data-select>
              <button>水平</button>
              <ul>
                <li data-value="horizontal" onclick="Editor.settings.set('default-orientation','horizontal');" data-selected>水平</li>
                <li data-value="vertical" onclick="Editor.settings.set('default-orientation','vertical');">垂直</li>
              </ul>
            </menu-drop>
          </div>
          <div class="checkbox">
            <input id="syntax_highlighting_setting" type="checkbox" oninput="setSyntaxHighlighting(this.checked);">
            <label for="syntax_highlighting_setting"><svg class="check"><use href="#check_icon"/></svg>语法突出显示</label>
          </div>
          <div class="checkbox">
            <input id="automatic_refresh_setting" type="checkbox" oninput="Editor.settings.set('automatic-refresh',this.checked);" checked>
            <label for="automatic_refresh_setting"><svg class="check"><use href="#check_icon"/></svg>自动刷新预览</label>
          </div>
        </div>
      </div>
      <!--div class="options">
        <button id="install_button" onclick="showInstallPrompt();"><svg><use href="#install_icon"/></svg>安装</button>
        <button id="theme_button" onclick="theme_card.open();" data-card-previous="theme_card">其他模版<svg><use href="#arrow_icon"/></svg></button>
      </div-->
      <div class="options">
        <button id="clear_site_caches_button" class="warning" onclick="clearSiteCaches();">清除缓存</button>
        <button class="warning" onclick="Editor.settings.reset({ confirm: true });">重置设置</button>
      </div>
    </div>
  </ste-card>
  <ste-card id="theme_card" class="card dialog" data-type="dialog">
    <div class="header" data-card-parent="settings_card">
      <span class="heading">模版</span>
    </div>
    <div class="main">
      <div class="content">
        <div class="item list">
          <span style="line-height: 1.6;">暂无</span>
        </div>
        <!--div class="item list expand">
          <num-text id="theme_setting" placeholder="CSS to modify..."></num-text>
        </div-->
      </div>
      <!--div class="options">
        <button onclick="resetTheme();">Reset Theme</button>
      </div-->
    </div>
  </ste-card>
  <ste-card id="preview_base_card" class="card dialog" data-type="dialog">
    <div class="header">
      <span class="heading">基础地址</span>
    </div>
    <div class="main">
      <div class="content">
        <div class="item list expand">
          <input id="preview_base_input" type="url">
        </div>
      </div>
      <div class="options">
        <button onclick="preview_base_input.reset();">重置</button>
      </div>
    </div>
  </ste-card>
  <ste-card id="reset_settings_card" class="card alert" data-type="alert">
    <div class="header">
      <img class="icon" src="resources/settings.svg" alt="">
      <span class="heading">重置设置</span>
    </div>
    <div class="main">
      <div class="content">
        <div class="item">设置已重置!</div>
      </div>
    </div>
  </ste-card>
  <ste-card id="cleared_cache_card" class="card alert" data-type="alert">
    <div class="header">
      <img class="icon" src="resources/template.svg" alt="">
      <span class="heading">清除缓存</span>
    </div>
    <div class="main">
      <div class="content">
        <div class="item">缓存清除成功!</div>
      </div>
    </div>
  </ste-card>
  <ste-card id="replace_text_card" class="card widget" data-type="widget">
    <div class="header">
      <span class="heading">替换文字</span>
    </div>
    <div class="main">
      <div class="content">
        <div class="item list expand">
          <num-text id="replacer_find" placeholder="查找文字..."></num-text>
          <num-text id="replacer_replace" placeholder="替换为..."></num-text>
        </div>
      </div>
      <div class="options">
        <button onclick="Tools.replaceText.replace();">替换</button>
        <button onclick="Tools.replaceText.flip();">置换</button>
        <button onclick="Tools.replaceText.clear();">清除</button>
      </div>
    </div>
  </ste-card>
  <ste-card id="color_picker_card" class="card widget" data-type="widget">
    <div class="header">
      <span class="heading">颜色选择器</span>
    </div>
    <div class="main">
      <div class="content">
        <div class="item list">
          <div id="picker_preview"></div>
          <input id="picker_input" type="text" value="#ee8800" maxlength="7" placeholder="#rrggbb">
        </div>
        <div class="item list">
          <label for="red_channel">红</label>
          <input id="red_channel" type="range">
          <label for="green_channel">绿</label>
          <input id="green_channel" type="range">
          <label for="blue_channel">蓝</label>
          <input id="blue_channel" type="range">
        </div>
      </div>
      <div class="options">
        <button onclick="copyPicker();">拷贝</button>
        <button onclick="insertPicker();">插入</button>
        <button onclick="deletePicker();">删除</button>
      </div>
    </div>
  </ste-card>
  <ste-card id="json_formatter_card" class="card widget" data-type="widget">
    <div class="header">
      <span class="heading">JSON格式化</span>
    </div>
    <div class="main">
      <div class="content">
        <div class="item expand">
          <num-text id="formatter_input" class="expand" syntax-language="json" placeholder="JSON data to format..."></num-text>
        </div>
      </div>
      <div class="options">
        <button onclick="Tools.jsonFormatter.format();">格式化</button>
        <button onclick="Tools.jsonFormatter.collapse();">折叠</button>
        <button onclick="Tools.jsonFormatter.clear();">清除</button>
      </div>
    </div>
  </ste-card>
  <ste-card id="uri_encoder_card" class="card widget" data-type="widget">
    <div class="header">
      <span class="heading">URI加密</span>
    </div>
    <div class="main">
      <div class="content">
        <div class="item expand">
          <num-text id="encoder_input" class="expand" placeholder="Text to encode..."></num-text>
        </div>
      </div>
      <div class="options">
        <button onclick="Tools.uriEncoder.encode();">加密</button>
        <button onclick="Tools.uriEncoder.decode();">解密</button>
        <button onclick="Tools.uriEncoder.clear();">清空</button>
      </div>
      <div class="options">
        <div class="checkbox">
          <input id="encoder_type" type="checkbox">
          <label for="encoder_type"><svg class="check"><use href="#check_icon"/></svg>启用URI组件</label>
        </div>
      </div>
    </div>
  </ste-card>
  <ste-card id="uuid_generator_card" class="card widget" data-type="widget">
    <div class="header">
      <span class="heading">UUID生成器</span>
    </div>
    <div class="main">
      <div class="content">
        <div class="item expand">
          <input id="generator_output" type="text" placeholder="结果..." readonly>
        </div>
      </div>
      <div class="options">
        <button onclick="generator_output.value = Tools.uuidGenerator.generate();">生成</button>
      </div>
    </div>
  </ste-card>
</main>

<script src="js/base.js"></script>
</body>

</html>